import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getOrderById } from '../../services/order'; // 根据实际情况调整引入路径
import { Spin, Descriptions, Alert, Table } from 'antd';

const { Item: DescriptionsItem } = Descriptions;

export default function OrderDetail() {
    // 从URL参数中获取订单ID
    const { id } = useParams();
    const [order, setOrder] = useState(null); // 存储订单数据的状态
    const [loading, setLoading] = useState(true); // 控制加载状态的状态
    const [error, setError] = useState(null); // 存储错误信息的状态

    // 使用useEffect在组件挂载和更新时执行异步数据获取操作
    useEffect(() => {
        const fetchOrder = async () => {
            setLoading(true); // 开始加载时设置loading为true
            try {
                const result = await getOrderById(id); // 调用服务获取订单数据
                if (result.data != null) {
                    console.log("result", result);
                    setOrder(result.data.result); // 如果成功获取数据，则更新order状态
                } else {
                    setError('Failed to fetch order details'); // 如果获取失败，设置错误信息
                }
            } catch (err) {
                setError('Failed to fetch order details'); // 捕获错误并设置错误信息
            } finally {
                setLoading(false); // 完成数据获取后，设置loading为false
            }
        };

        fetchOrder();
    }, [id]); // 依赖于id，当id变化时重新执行

    // 如果正在加载，显示加载动画
    if (loading) {
        return <Spin />;
    }

    // 如果发生错误，显示错误信息
    if (error) {
        return <Alert message="Error" description={error} type="error" />;
    }

    // 如果未找到订单，显示订单未找到信息
    if (!order) {
        return <Alert message="Error" description="Order not found" type="error" />;
    }

    // 定义表格列配置
    const columns = [
        {
            title: '商品ID',
            dataIndex: 'productId',
            key: 'productId',
        },
        {
            title: '商品名称',
            dataIndex: 'productName',
            key: 'productName',
        },
        {
            title: '价格',
            dataIndex: 'productPrice',
            key: 'productPrice',
        },
        {
            title: '数量',
            dataIndex: 'productQuantity',
            key: 'productQuantity',
        },
    ];

    return (
        <Descriptions title="订单详情" bordered>
            {/* 显示订单的详细信息 */}
            <DescriptionsItem label="订单ID">{order.orderId}</DescriptionsItem>
            <DescriptionsItem label="用户ID">{order.userId}</DescriptionsItem>
            <DescriptionsItem label="总费用">{order.cost}</DescriptionsItem>
            <DescriptionsItem label="地址">{order.address}</DescriptionsItem>
            <DescriptionsItem label="折扣">{order.discount}</DescriptionsItem>
            <DescriptionsItem label="运费">{order.shippingCost}</DescriptionsItem>
            <DescriptionsItem label="备注">{order.note}</DescriptionsItem>
            <DescriptionsItem label="支付方式">{order.paymentMethod}</DescriptionsItem>
            <DescriptionsItem label="提交时间">{order.submitTime}</DescriptionsItem>
            <DescriptionsItem label="商品列表">
                {/* 显示订单包含的商品列表 */}
                <Table
                    dataSource={order.productList}
                    columns={columns}
                    rowKey="productId"
                    pagination={false} // 关闭分页
                />
            </DescriptionsItem>
        </Descriptions>
    );
}
